<template>
    <div class="login">
        <el-dialog
                :center="true"
                :visible="true"
                width="400px"
                :show-close="false"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                custom-class="customClass"
                class="customClass"
        >
            <div slot="title">
                <div class="img">
                    <img src="../assets/Logintitle.png" alt="">
                </div>
                <h2>校园内部平台</h2>
            </div>
            <div class="conten">
                <el-form>
                    <el-form-item class="marginBottom">
                        <el-input clearable placeholder="请输入手机号" v-model="user.phone"></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-input placeholder="请输入密码" clearable v-model="user.passWord" show-password></el-input>
                    </el-form-item>
                    <el-form-item class="marginBottom">
                        <el-button style="width: 100%" @click="login" type="primary">登陆</el-button>
                        <el-link style="width: 100%" @click="go" type="primary">没有账号？立即注册</el-link>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return {
        user: {
          phone: '17728399394',
          passWord: 'yida5610..',
        }
      }
    },
    methods: {
      go(){
        this.$router.push('/register')
      },
      login(){
        this.$api.user.userLogin(this.user)
        .then(res => {
          console.log(res);
          if (this.user.passWord === res.data.passWord){
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push('/');

          }else{
            this.$message({
              message: '密码错误',
              type: 'error',
            })
          }
        })
        .catch(() => {

          this.$message({
            message: '不存在该用户',
            type: 'error',
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
    .customClass {
        background: url("../assets/login_bg.jpg") no-repeat;
        background-size: cover;

        .img {
            width: 50px;
            height: 50px;
            margin: auto;
        }

    }
</style>
